<%-- 
    Document   : cadastroUsuario
    Created on : Apr 12, 2013, 9:11:27 AM
    Author     : Tadeu Augusto
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery.js"></script>
        <script>
            $(function() {
                function removeCampo(formulario) {
                    $(".removerCampo", '#' + formulario).unbind("click");
                    $(".removerCampo", '#' + formulario).bind("click", function() {
                        i = 0;
                        $(".telefones p.campoTelefone", '#' + formulario).each(function() {
                            i++;
                        });
                        if (i > 1) {
                            $(this).parent().remove();
                        }
                    });
                }
                removeCampo('');
                removeCampo('');
                $(".adicionarCampo").click(function() {
                    novoCampo = $(".telefones p.campoTelefone:first").clone();
                    novoCampo.find("input").val("");
                    novoCampo.insertAfter(".telefones p.campoTelefone:last");
                    removeCampo();
                });
            });
        </script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Cadastro</title>
    </head>
    <body>
        <div id="content">
            <div id="topLeft">
                <a href="">
                    <img src='Imagens/Top_banner.png' alt="Portal de Eventos">
                </a>
            </div>
            <div id="navbar">
                <div id="navigation">
                    <table>
                        <tr>
                            <td>
                                <a href="redireciona.jsp">
                                    <img src="Imagens/home.png">
                                    <span>Início</span>
                                </a>
                            </td>
                            <td>
                                <a href="mail">
                                    <img src="Imagens/contato.png">
                                    <span>Contato</span>
                                </a>
                            </td>
                            <td>
                                <a href="#">
                                    <img src="Imagens/busca.png">
                                    <span>Buscar</span>
                                </a>
                            </td>
                    </table>
                </div>
            </div>
            <div class="clear">
            </div>
            <div id="page">
                <div id="leftContent">
                </div>
                <div id="mainContent" style="float: none; width: 100%; height: 100%; padding-bottom: 20px; border-right: none; border-left: none;">
                    <h1 align="center">Preencha os dados a seguir:</h1>
                    <table boarder="0" align="center">
                        <tr>
                            <td colspan="2" align="center">
                                <select id="tipo">
                                    <option value="" selected>Selecione seu tipo de pessoa</option>
                                    <option value="1">Física</option>
                                    <option value="2">Jurídica</option>
                                </select>
                                <script>
                                    $(document).ready(function() {
                                        $('#tipo').change(function() {
                                            var valor = $('#tipo').val();
                                            if (valor == 1) {
                                                $('#opc2').hide('slow', function() {
                                                    $('#opc1').show('slow');
                                                });
                                            } else {
                                                if (valor == 2) {
                                                    $('#opc1').hide('slow', function() {
                                                        $('#opc2').show('slow');
                                                    });
                                                } else {
                                                    $('#opc1').hide('slow');
                                                    $('#opc2').hide('slow');
                                                }
                                            }
                                        });
                                    });
                                </script>
                            </td>
                        </tr>
                    </table>
                    <form id="cadastro_pessoa" action="../portalacesso" method="post">
                        <div id="opc1" align="center" style="display: none">
                            <table>
                                <tr>
                                    <td>
                                        <span>CPF</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="cpf_cnpj" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Senha</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="senha" type="password" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Nome</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="nome" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Sobrenome</span>
                                    </td>
                                    <td>
                                        <input name="sobrenome" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>e-mail</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="email" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Telefones</span>
                                    </td>
                                </tr>
                                <td colspan="2">
                                    <div class="telefones">
                                        <p class="campoTelefone">
                                            <select>
                                                <option value="" selected>---Tipo---</option>
                                                <option value="celular">Celular</option>
                                                <option value="casa">Casa</option>
                                                <option value="trabalho">Trabalho</option>
                                            </select>
                                            <br>
                                            <br>
                                            <input type="number" name="telefone[]" size="3" maxlength="2" placeholder="ddd" style="font-weight: bold; color: #a3a3a3"/>
                                            <input type="number" name="telefone[]" size="18" maxlength="9" placeholder="numero" style="font-weight: bold; color: #a3a3a3"/>
                                            <a href="javascript:void(0);" class="removerCampo">
                                                <img src="Imagens/remove.png" style="width: 15px; vertical-align: text-bottom">
                                            </a>
                                        </p>
                                    </div>
                                    <p>
                                        <a href="javascript:void(0);" class="adicionarCampo">
                                            <img src="Imagens/adiciona.png" style="width: 15px; vertical-align: text-bottom">
                                        </a>
                                    </p>
                                </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>CEP</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="cep" type="number" size="20" maxlength="8"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Cidade</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="cidade" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Estado</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="estado" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Setor</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="setor" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Rua</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="rua" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Complemento</span>
                                    </td>
                                    <td>
                                        <input name="complemento" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <input type="submit" name="Salvar" value="Cadastrar" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <label style="color: #f00">Campos Marcados com "*" são obrigatórios</label>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </form>
                    <form id="cadastro_empresa" action="../portalacesso" method="post">
                        <div id="opc2" align="center" style="display: none">
                            <table>
                                <tr>
                                    <td>
                                        <span>CNPJ</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="cpf_cnpj" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Senha</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="senha" type="password" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Nome</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="nome" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>e-mail</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="email" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Telefones</span>
                                    </td>
                                </tr>
                                <td colspan="2">
                                    <div class="telefones">
                                        <p class="campoTelefone">
                                            <select>
                                                <option value="" selected>---Tipo---</option>
                                                <option value="celular">Celular</option>
                                                <option value="empresa">Empresarial</option>
                                            </select>
                                            <br>
                                            <br>
                                            <input type="text" name="telefone[]" size="3" maxlength="2" value="ddd" style="font-weight: bold; color: #a3a3a3"/>
                                            <input type="text" name="telefone[]" size="18" maxlength="9" value="numero" style="font-weight: bold; color: #a3a3a3"/>
                                            <a href="javascript:void(0);" class="removerCampo">
                                                <img src="Imagens/remove.png" style="width: 15px; vertical-align: text-bottom">
                                            </a>
                                        </p>
                                    </div>
                                    <p>
                                        <a href="javascript:void(0);" class="adicionarCampo">
                                            <img src="Imagens/adiciona.png" style="width: 15px; vertical-align: text-bottom">
                                        </a>
                                    </p>
                                </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>CEP</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="cep" type="number" size="20" maxlength="8"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Cidade</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="cidade" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Estado</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="estado" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Setor</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="setor" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Rua</span>
                                        <label style="color: #f00">*</label>
                                    </td>
                                    <td>
                                        <input name="rua" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Complemento</span>
                                    </td>
                                    <td>
                                        <input name="complemento" type="text" size="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <input type="submit" name="Salvar" value="Cadastrar" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <label style="color: #f00">Campos Marcados com "*" são obrigatórios</label>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <script>
                            $(function() {
                                $('#cadastro_pessoa').validate({
                                    rules: {
                                        cpf_cnpj: {
                                            required: true,
                                            number: true
                                        },
                                        senha: {
                                            required: true
                                        },
                                        nome: {
                                            required: true
                                        },
                                        email: {
                                            required: true,
                                            email: true
                                        },
                                        cep: {
                                            required: true,
                                            number: true
                                        },
                                        cidade: {
                                            required: true
                                        },
                                        estado: {
                                            required: true
                                        },
                                        setor: {
                                            required: true
                                        },
                                        rua: {
                                            required: true
                                        }
                                    },
                                    messages: {
                                        login: {
                                            required: "Login não preenchido",
                                            number: "CPF inválido"
                                        },
                                        cpf_cnpj: {
                                            required: "Campo obrigatório não preenchido",
                                            number: "Número inválido"
                                        },
                                        senha: {
                                            required: "Campo obrigatório não preenchido"
                                        },
                                        nome: {
                                            required: "Campo obrigatório não preenchido"
                                        },
                                        email: {
                                            required: "Campo obrigatório não preenchido",
                                            email: "Endereço de e-mail inválido"
                                        },
                                        cep: {
                                            required: "Campo obrigatório não preenchido",
                                            number: "CEP inválido. Digite apenas números"
                                        },
                                        cidade: {
                                            required: "Campo obrigatório não preenchido"
                                        },
                                        estado: {
                                            required: "Campo obrigatório não preenchido"
                                        },
                                        setor: {
                                            required: "Campo obrigatório não preenchido"
                                        },
                                        rua: {
                                            required: "Campo obrigatório não preenchido"
                                        }
                                    },
                                    wrapper: "div"
                                });
                            });
                        </script>
                    </form>
                </div>
                <div id="rightContent">
                </div>
                <div class="clear"></div>
                <div id="footer">
                    <span>Página em Desenvolvimento</span>
                    <br>
                    <span>UFG - Universidade Federal de Goiás</span>
                    <br>
                    <span>Sistemas de Informação</span>
                </div>
            </div> 
        </div>
        <script src="js/validate.js"></script>
    </body>
</html>
